<template>
  <div class="app-container">
    <!-- v-permission="['airMonitor:quarterAirMonitor:read']" -->
    <!--<div id="pdfDom" class="row">-->
    <div class="head">
      <el-row>
        <el-col :span="fsizecom">
          <h2 align="center">{{ fsiteName }} 季空气报表</h2>
        </el-col>
      </el-row>
    </div>
    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <!--<el-date-picker v-model="month" type="date" clearable class="filter-item" placeholder="选择日期"/>-->
      <el-date-picker v-model="yearDate" type="year" clearable class="filter-item" style="width: 150px" placeholder="选择年份"/>
      <el-select v-model="listQuery.fpointNo" clearable filterable class="filter-item" placeholder="请选择楼层" @change="getFpoints(listQuery.fpointNo)">
        <el-option
          v-for="item in towers"
          :key="item.value"
          :label="item.label"
          :value="item.value"/>
      </el-select>
      <el-select v-model="listQuery.fpointNo2" clearable filterable class="filter-item" placeholder="请选择房间">
        <el-option
          v-for="item in points"
          :key="item.value"
          :label="item.label"
          :value="item.value"/>
      </el-select>
      <el-button class="filter-item" :style="{background:buttonColor.lookup,color:buttonColor.color}" icon="el-icon-search" @click="handleFilter()">查找</el-button>
    </div>
    <div class="list">
      <div class="uni-flex uni-row off" style="min-height: 2rem;">
        <div class="text1">季度</div>
        <div class="text2">质量</div>
        <div class="text2">PM2.5</div>
        <div class="text2">PM10</div>
        <div class="text2">甲醛</div>
        <div class="text2">二氧化碳</div>
        <div class="text2">挥发性有机物</div>
        <div class="text2">温度</div>
        <div class="text2">湿度</div>
      </div>
      <div v-for="(item,index) in dataList" :class="[index%2===0 ? 'on' : 'off']" :key="item.fsiteNo" class="uni-flex uni-row uni-body">
        <div class="text1">{{ item.ftimeStr }}</div>
        <div class="text2">{{ item.faqi2Level|emptyFielter }}</div>
        <div class="text2">{{ item.fpm25|intFielter }}</div>
        <div class="text2">{{ item.fpm10|intFielter }}</div>
        <div class="text2">{{ item.fjq|intFielter }}</div>
        <div class="text2">{{ item.fco2|intFielter }}</div>
        <div class="text2">{{ item.fyjw|intFielter }}</div>
        <div class="text2">{{ item.fwd2|emptyFielter }}</div>
        <div class="text2">{{ item.fsd2|intFielter }}</div>
      </div>
    </div>

    <div>
      <div id="PM2.5" :style="{width: '95%', height: '500px'}"/>
      <br>
      <div id="PM10" :style="{width: '95%', height: '500px'}"/>
      <br>
      <div id="甲醛" :style="{width: '95%', height: '500px'}"/>
      <br>
      <div id="二氧化碳" :style="{width: '95%', height: '500px'}"/>
      <br>
      <div id="挥发性有机物" :style="{width: '95%', height: '500px'}"/>
      <br>
      <div id="温度" :style="{width: '95%', height: '500px'}"/>
      <br>
      <div id="湿度" :style="{width: '95%', height: '500px'}"/>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request'
import { listPointByFsiteNo2, listPointByFpointNo } from '@/api/airAlarm'
import moment from 'moment'
import { tableColor,titleColor ,buttonColor} from '@/filters/index'
let userifo = null
var urlStr = ''
export default {
  name: 'Area',
  filters: {
    dateFormat(date) {
      if (date === undefined || date === null || date === '') {
        return ''
      }
      return moment(date).format('YYYY-MM-DD')
    }
  },
  data() {
    return {
      buttonColor:buttonColor,
      yearDate: new Date(),
      towers: [],
      points: [],
      x: [],
      yPM25: [],
      yPM10: [],
      yJQ: [],
      yCO2: [],
      yYJW: [],
      yWD: [],
      ySD: [],
      fsiteName: '',
      dataList: null,
      htmlTitle: '页面导出PDF文件名', // 这个也是固定写法，pdf文件下载的名称
      listQuery: {
        year: undefined,
        fsiteNo: undefined,
        fpointNo: undefined,
        fpointNo2: undefined
      }
    }
  },
  computed: {
    fsizecom() {
      return this.visibleSubmit === 'none' ? 22 : 20
    }
  },
  created() {
    userifo = this.$store.state.user
    if (userifo.fsiteLevel === 3) {
      this.fsiteName = userifo.fsiteName
      this.handleFilter()
      this.getTowers()
    } else {
      this.$notify.error({
        title: '',
        message: '没有权限！仅限学校账号'
      })
    }
  },
  methods: {
    handleFilter: function() {
      urlStr = '/newAirReports/getNewQuarterAirData'
      this.listQuery.fsiteNo = userifo.fsiteNo
      this.listQuery.year = this.yearMonth(this.yearDate)
      listAir(this.listQuery)
        .then(response => {
          this.dataList = response.data.data.list
          this.x = []
          this.yPM25 = []
          this.yPM10 = []
          this.yJQ = []
          this.yCO2 = []
          this.yYJW = []
          this.yWD = []
          this.ySD = []
          this.dataList.forEach(v => {
            this.x.push(v.ftimeStr)
            this.yPM25.push(v.fpm25)
            this.yPM10.push(v.fpm10)
            this.yJQ.push(v.fjq)
            this.yCO2.push(v.fco2)
            this.yYJW.push(v.fyjw)
            this.yWD.push(v.fwd2)
            this.ySD.push(v.fsd2)
          })
          this.showChartPie('PM2.5', '#1C86EE', this.x, this.yPM25)
          this.showChartPie('PM10', '#00FF99', this.x, this.yPM10)
          this.showChartPie('甲醛', '#2D23FF', this.x, this.yJQ)
          this.showChartPie('二氧化碳', '#339933', this.x, this.yCO2)
          this.showChartPie('挥发性有机物', '#FF6633', this.x, this.yYJW)
          this.showChartPie('温度', '#FF6699', this.x, this.yWD)
          this.showChartPie('湿度', '#33CCCC', this.x, this.ySD)
        })
        .catch(() => {
          this.dataList = []
        })
      // listAirLine(this.listQuery)
      //   .then(response => {
      //     const categories = response.data.data.list.map(function(item) {
      //       return item.ftime
      //     })
      //     const datas = response.data.data.list.map(function(item) {
      //       return item.faqi
      //     })
      //     this.showChartPie(categories, datas)
      //   })
      //   .catch(() => {
      //     this.categories = []
      //     this.datas = []
      //   })
    },
    yearMonth(date) {
      // var date = new Date(this.year)
      // var ym
      var y = date.getFullYear()
      // var m = date.getMonth() + 1
      // if (m < 10) {
      //   m = '0' + m
      // }
      // ym = '' + y + m
      return y
    },
    getTowers() {
      listPointByFsiteNo2(userifo.fsiteNo)
        .then(response => {
          this.towers.push({ 'value': '1', 'label': '所有楼层' })
          response.data.data.list.forEach(v => {
            this.towers.push({ 'value': v.fpointNo, 'label': v.fpointName })
          })
        })
        .catch(() => {
          this.towers = []
        })
    },
    getFpoints(fpointNo) {
      this.points = []
      this.listQuery.fpointNo2 = null
      listPointByFpointNo(fpointNo)
        .then(response => {
          this.points.push({ 'value': '1', 'label': '所有房间' })
          response.data.data.list.forEach(v => {
            this.points.push(v)
          })
        })
        .catch(() => {
          this.points = []
        })
    },
    showChartPie(title, color, categories, datas) {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById(title))
      // 绘制图表
      myChart.setOption({
        title: {
          text: title,
          left: 'center'
        },
        xAxis: {
          name: '小时',
          type: 'category',
          boundaryGap: false,
          data: categories
        },
        yAxis: {
          type: 'value'
        },
        series: {
          data: datas,
          type: 'line',
          color: color,
          label: {
            show: true
          },
          areaStyle: {}
        },
        tooltip: {
          trigger: 'axis'
        }
      })
    },
    beforeDate() {
      var yy = new Date() - 1000 * 60 * 60 * 24
      return new Date(yy)
    }
  }
}
export function listAir(query) {
  return request({
    url: urlStr,
    method: 'get',
    params: query
  })
}
export function listAirLine(query) {
  return request({
    url: '/airReport/getDayLineChart',
    method: 'get',
    params: query
  })
}
</script>

<style>
  .text1 {
    width: 500px;
    color: #000000;
    text-align: center;
    height: 70px;
    line-height: 70px;
  }

  .text2 {
    width: 350px;
    color: #000000;
    text-align: center;
    height: 70px;
    line-height: 70px;
  }
  .on {
    background: #54d6e3;
  }

  .off {
    background: #55cdd9;
  }

  .list {
    padding-bottom: 30px;
    box-sizing: border-box;
    flex: 1;
    flex-direction: column;
    display: flex;
    padding-top: 10px;
    height: 40%;
    flex: 2;
    text-align: left;
  }
  .uni-row {
    flex-direction: row;
  }
  .uni-flex {
    display: flex;
    flex-direction: row;
  }
  /*.uni-body{
    cursor: pointer;
  }*/
  /*.uni-body div:hover{
    color: blue;
    text-decoration: underline;
  }*/
</style>
